<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    li {
      list-style: none;
      width: 300px;
      height: 100px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 100px;
    }
    ul {
      float: left;
    }
    div {
      float: left;
      width: 500px;
      height: 305px;
      border: 1px solid #ccc;
      margin-top: 18px;
    }
  </style>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <div>
      <img
        id="tu"
        src="https://img-baofun.zhhainiao.com/market/133/f43477adecc82e51dd1f5bd901c854c5_preview_raw.jpg"
        alt=""
      />
    </div>
  </body>
  <script>
    window.onload = function () {
      var liObj = document.getElementsByTagName('li')
      for (var i = 0; i < liObj.length; i++) {
        liObj[i].onmouseover = funOver
        liObj[i].index = i
      }
    }
    var imgArr = [
      'https://img-baofun.zhhainiao.com/market/133/f43477adecc82e51dd1f5bd901c854c5_preview_raw.jpg',
      'https://img-baofun.zhhainiao.com/market/133/bb29f3ae4b9b93fd5c71fe32460964bc_preview.jpg',
      'https://img-baofun.zhhainiao.com/market/133/e13c795109d561dbf891b8056f659d48_preview_raw.jpg',
    ]
    function funOver() {
      var liObj = document.getElementsByTagName('li')
      for (var i = 0; i < liObj.length; i++) {
        liObj[i].style.background = 'white'
      }
      document.getElementById('tu').src = imgArr[this.index]
      this.style.background = 'blue'
    }
  </script>
</html>
